<template>
  <f7-panel
    left
    resizable
    class="leftPanel"
    :swipe-only-close="true"
    style="border-top-right-radius: 0.04rem;border-bottom-right-radius: 0.04rem;"
  >
    <f7-view
      style="border-top-right-radius: 0.04rem;border-bottom-right-radius: 0.04rem;"
    >
      <f7-page
        style="border-top-right-radius: 0.04rem;border-bottom-right-radius: 0.04rem;"
      >
        <f7-block class="leftMuH">
          <f7-photo-browser
            :photos="photos"
            theme="dark"
            ref="standalone"
          ></f7-photo-browser>
          <!-- <svg-icon iconClass="user_icon" /> -->
          <img style="border-radius:50%;"
            @click="$refs.standalone.open()"
            :src="userPhoto?userPhoto.url:'/static/user_header.jpg'"
          />
          <p class="userInfo">
            <span>{{ getUserInfo.username }} </span>
          </p>
        </f7-block>
        <f7-list>
          <f7-list-item>
            <span class="spanColor">黑暗模式</span>
            <f7-toggle
              id="theme_dark"
              @toggle:change="handleChange"
              :value="toggleVal"
              :checked="toggleInit"
              color="red"
            ></f7-toggle>
          </f7-list-item>
          <f7-list-button class="spanColor" @click.stop="uploadAvatar()"
            >上传头像</f7-list-button
          >
          <f7-list-button class="spanColor" @click.stop="uploadSong()"
            >上传歌曲</f7-list-button
          >
          <f7-list-button class="spanColor" @click.stop="uploadSingerImg()"
            >上传歌手海报</f7-list-button
          >

          <f7-list-item>
            <span class="spanColor">管理者权限</span>
            <f7-toggle
              id="manageToggle"
              @toggle:change="handleChange_m"
              :value="toggleVal_m"
              :checked="toggleInit_m"
              color="red"
            ></f7-toggle>
          </f7-list-item>
          <f7-list-button
            class="spanColor"
            @click.stop="goToDeveloperMessagePage()"
            >开发者留言</f7-list-button
          >
          <li class="backgroundSubColor" style="height:20px;width:100%"></li>
          <f7-list-button class="spanColor" @click.stop="signOut()"
            >退出登录</f7-list-button
          >
        </f7-list>
      </f7-page>
    </f7-view>
  </f7-panel>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import { setLocalItem, getLocalItem, debounce } from '@/utils/index.js'
import { removeToken } from '@/utils/auth.js'
export default {
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
      getPlayState: 'getPlayState',
      getManageState: 'getManageState',
    }),
    computedUserInfo:{
      get(){
        return this.getUserInfo;
      }
    }
  },
  data() {
    return {
      toggleVal: 1, //黑暗模式
      toggleVal_m: 0, //管理者权限
      toggleInit: false,
      toggleInit_m: false,
      userPhoto:{
        url: 'https://cdn.framework7.io/placeholder/people-160x160-1.jpg',
        caption: 'Change an avatar, change a mood(*￣︶￣)',
      },
      photos: [
        
      ],
    }
  },
  watch:{
    getUserInfo:{
      handler:function (newVal) {
        console.log('getUserInfo change!!!')
        if (newVal.headerImgUrl){
          this.userPhoto.url = newVal.headerImgUrl;
        }
        
      },
      deep:true,
    }
  },
  created() {
    //判断是否为黑暗模式
    let isDark = getLocalItem('is_theme_dark')
    let self = this
    if (isDark === 1) {
      this.toggleInit = true
    }
    if (this.getManageState) {
      this.toggleInit_m = true
    }
    //判断用户是否有头像
    if (this.getUserInfo.headerImgUrl){
      this.userPhoto.url = this.getUserInfo.headerImgUrl;
    }
    this.photos.push(this.userPhoto);
  },
  mounted(){

  },
  methods: {
    ...mapActions({
      changeIsThemeDark: 'changeIsThemeDark',
      play: 'play',
      sendManageState: 'sendManageState',
    }),
    //管理者权限变更
    handleChange_m(val) {
      if (val) {
        let self = this
        this.$f7ready((f7) => {
          f7.dialog.prompt(
            '请输入管理者密码',
            function(password) {
              if (password == 'Aurora') {
                let toastTop = f7.toast.create({
                  text: '进入管理者模式',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()
                self.toggleVal_m = 1
                self.$store.dispatch('sendManageState', true)
              } else {
                let toastTop = f7.toast.create({
                  text: '密码错误',
                  position: 'top',
                  closeTimeout: 1500,
                })
                toastTop.open()
                self.toggleVal_m = 0
                f7.toggle.get('#manageToggle').toggle()
              }
            },
            function() {
              self.toggleVal_m = 0
              f7.toggle.get('#manageToggle').toggle()
            }
          )
        })
      } else {
        if (this.getManageState) {
          let self = this
          this.$f7ready((f7) => {
            let toastTop = f7.toast.create({
              text: '退出管理者模式',
              position: 'top',
              closeTimeout: 1500,
            })
            toastTop.open()
            self.toggleVal_m = 0
            self.$store.dispatch('sendManageState', false)
          })
        } else {
        }
      }
    },
    //黑暗模式变更
    handleChange(val) {
      console.log(val)
      if (val) {
        this.toggleVal = 1
        this.changeIsThemeDark(true)
        setLocalItem('is_theme_dark', 1)
      } else {
        this.toggleVal = 0
        this.changeIsThemeDark(false)
        setLocalItem('is_theme_dark', 0)
      }
    },
    //上传头像
    uploadAvatar() {
      this.$f7ready((f7) => {
        f7.panel.close()
        f7.views.main.router.navigate('/uploadAvatar/')
      })
    },
    //上传歌曲
    uploadSong() {
      this.$f7ready((f7) => {
        f7.panel.close()
        f7.views.main.router.navigate('/upload/')
      })
    },
    //上传歌手海报
    uploadSingerImg() {
      this.$f7ready((f7) => {
        f7.panel.close()
        f7.views.main.router.navigate('/uploadSingerImg/')
      })
    },
    goToDeveloperMessagePage() {
      this.$f7ready((f7) => {
        f7.panel.close()
        f7.views.main.router.navigate('/developerMessage/')
      })
    },
    //退出登录
    signOut() {
      console.log('signOut')
      if (this.getPlayState) {
        this.play()
      }
      removeToken()
      this.$f7ready((f7) => {
        f7.panel.close()
        f7.views.main.router.navigate('/')
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/assets/scss/theme.scss';
.light .panel-left {
  $backgroundColor: #d9e7e7;
  $spanColor: #212121;
  /deep/ .page-content {
    background-color: $backgroundColor;
  }
  /deep/ a {
    color: $spanColor;
  }
}
.dark .panel-left {
  $backgroundColor: #212121;
  $spanColor: #ffffff;
  /deep/ .page-content {
    background-color: $backgroundColor;
  }
  /deep/ a {
    color: $spanColor;
  }
}
.light .leftMuH {
  background: linear-gradient(to bottom, red, #ffffff);
}
.dark .leftMuH {
  background: linear-gradient(to bottom, red, black);
}

.leftMuH {
  height: 30vh;

  background-size: cover;
  display: flex;
  align-items: center;
  margin: 0;
  border-top-right-radius: 0.04rem;
  .svg-icon,
  img {
    width: 0.5rem;
    height: 0.5rem;
  }
  .userInfo {
    margin: 0 0 0 0.1rem;
    span {
      display: block;
      // margin-top: 0.1rem;
      font-size: 0.18rem;
      font-family: cursive;
      color: white;
    }
  }
}
.list {
  margin: 0 !important;
}
.light .panel-left .list {
  $backgroundSubColor: #d4c3c3;
  /deep/ ul {
    background-color: $backgroundSubColor;
  }
}
.dark .panel-left .list {
  $backgroundSubColor: #592e2e;
  /deep/ ul {
    background-color: $backgroundSubColor;
  }
}
</style>
